logo

Political & Election Campaign HTML Template

Installation

Follow the steps below to get started with neta Political & Election Campaign HTML Template  :

  1. Open the Package/neta Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
  3. Make sure you have upload the required files and folders listed below:
    • neta HTML/assets - Stylesheets, JavaScript, Fonts etc Folder 
    • neta HTML/assets/images - Images Folder  
    • neta HTML/index.html - Index File/Homepage
    The other files can be used according to your preferences.
  4. You're now ready to go..! Start adding your Content and show off your Brand New Website.

Features At A Glance

  1. HTML5 & CSS3 & jQuery
  2. Modern And Creative Design
  3. Universal menu
  4. 100% Responsive
  5. Well documented
  6. Complete SASS files
  7. Bootstrap 4
  8. Fontawesome Used
  9. SwiperSlider Used
  10. Google Font Used
  11. Lightcase Used
  12. Google Map
  13. Eye Catching Design
  14. W3C Valid Code

HTML Structure

neta has follows a simple coding structure. here is the sample:

 

						


	

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Neta</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/swiper.min.css">
    <link rel="stylesheet" href="assets/css/lightcase.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <!-- preloader start -->
    <div id="loading">
        <div id="loading-center">
            <div id="loading-center-absolute">
                <div class="object" id="object_one"></div>
                <div class="object" id="object_two"></div>
                <div class="object" id="object_three"></div>
                <div class="object" id="object_four"></div>
            </div>
        </div>
    </div>
    <!-- preloader end -->
    <!-- Start Header -->
    <header class="header style-1">
        <div class="container">
            <nav class="navbar navbar-expand-lg p-0">
                <a class="navbar-brand logo" href="index.html">Neta</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="fa fa-bars"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="nav navbar-nav ml-auto">
                        <li class="active"><a href="#0">Home</a>
                            <ul class="submenu">
                                <li class="active-submenu"><a href="index.html">Homepage 1</a></li>
                                <li><a href="homepage2.html">Homepage 2</a></li>
                                <li><a href="homepage3.html">Homepage 3</a></li>
                                <li><a href="homepage4.html">Homepage 4</a></li>
                                <li><a href="homepage5.html">Homepage 5</a></li>
                                <li><a href="homepage6.html">Homepage 6</a></li>
                                <li><a href="homepage7.html">Homepage 7</a></li>
                            </ul>
                        </li>
                        <li><a href="#0">Pages</a>
                            <ul class="submenu">
                                <li><a href="#0">Causes</a>
                                    <ul class="submenu">
                                        <li><a href="cause-list-view.html">Causes List View</a></li>
                                        <li><a href="causes-grid-view.html">Causes Grid View</a></li>
                                        <li><a href="cause-single.html">Causes Single</a></li>
                                    </ul>
                                </li>
                                <li><a href="volunteer.html">Volunteer</a></li>
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="coming-soon.html">Coming Soon</a></li>
                                <li><a href="404.html">404</a></li>
                            </ul>
                        </li>
                        <li><a href="bio-graphy.html">Biography</a></li>
                        <li><a href="#0">Blog</a>
                            <ul class="submenu">
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="single.html">Blog Single</a></li>
                            </ul>
                        </li>
                        <li><a href="index.html">Campaign</a>
                            <ul class="submenu">
                                <li><a href="campaign.html">Campaign</a></li>
                                <li><a href="campaign-detail.html">Campaign Details</a></li>
                            </ul>
                        </li>
                        <li><a href="#0">Gallery</a>
                            <ul class="submenu">
                                <li><a href="gallery-2col.html">Gallery 2col</a></li>
                                <li><a href="gallery-3col.html">Gallery 3col</a></li>
                                <li><a href="gallery-4col.html">Gallery 4col</a></li>
                                <li><a href="gallery-massonry.html">Gallery massonry</a></li>
                            </ul>
                        </li>
                        <li><a href="#0">Shop</a>
                            <ul class="submenu">
                                <li><a href="shop.html">Shop</a></li>
                                <li><a href="product-detail.html">Product Detail</a></li>
                                <li><a href="cart.html">Product Cart</a></li>
                            </ul>
                        </li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                    <a href="donate.html" class="custom-btn donate">Donate Now</a>
                </div>
            </nav>
        </div>
        <!-- <nav class="navbar transparent-menu codexcoder-navbar">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-menu-toggle" aria-expanded="false">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand logo" href="index.html">Neta</a>
                </div>
                <div class="collapse navbar-collapse" id="mobile-menu-toggle">
                    <a href="donate.html" class="custom-btn donate">Donate Now</a>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#0">Home</a>
                            <ul class="submenu">
                                <li class="active-submenu"><a href="index.html">Homepage 1</a></li>
                                <li><a href="homepage2.html">Homepage 2</a></li>
                                <li><a href="homepage3.html">Homepage 3</a></li>
                                <li><a href="homepage4.html">Homepage 4</a></li>
                                <li><a href="homepage5.html">Homepage 5</a></li>
                                <li><a href="homepage6.html">Homepage 6</a></li>
                                <li><a href="homepage7.html">Homepage 7</a></li>
                            </ul>
                        </li>
                        <li><a href="#0">Pages</a>
                            <ul class="submenu">
                                <li><a href="#0">Causes</a>
                                    <ul class="submenu">
                                        <li><a href="cause-list-view.html">Causes List View</a></li>
                                        <li><a href="causes-grid-view.html">Causes Grid View</a></li>
                                        <li><a href="cause-single.html">Causes Single</a></li>
                                        <li><a href="#0">sample</a>
                                            <ul class="submenu">
                                                <li><a href="#">sample 1</a></li>
                                                <li><a href="#0">sample 2</a>
                                                    <ul class="submenu">
                                                        <li><a href="#">sample 1.1</a></li>
                                                        <li><a href="#">sample 2.1</a></li>
                                                        <li><a href="#">sample 3.1</a></li>
                                                    </ul>
                                                </li>
                                                <li><a href="#">sample 3</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="volunteer.html">Volunteer</a></li>
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="coming-soon.html">Coming Soon</a></li>
                                <li><a href="404.html">404</a></li>
                            </ul>
                        </li>
                        <li><a href="bio-graphy.html">Biography</a></li>
                        <li><a href="#0">Blog</a>
                            <ul class="submenu">
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="single.html">Blog Single</a></li>
                            </ul>
                        </li>
                        <li><a href="index.html">Campaign</a>
                            <ul class="submenu">
                                <li><a href="campaign.html">Campaign</a></li>
                                <li><a href="campaign-detail.html">Campaign Details</a></li>
                            </ul>
                        </li>
                        <li><a href="#0">Gallery</a>
                            <ul class="submenu">
                                <li><a href="gallery-2col.html">Gallery 2col</a></li>
                                <li><a href="gallery-3col.html">Gallery 3col</a></li>
                                <li><a href="gallery-4col.html">Gallery 4col</a></li>
                                <li><a href="gallery-massonry.html">Gallery massonry</a></li>
                            </ul>
                        </li>
                        <li><a href="#0">Shop</a>
                            <ul class="submenu">
                                <li><a href="shop.html">Shop</a></li>
                                <li><a href="product-detail.html">Product Detail</a></li>
                                <li><a href="cart.html">Product Cart</a></li>
                            </ul>
                        </li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>

                </div>
            </div>
        </nav> -->
    </header>
    <!-- End Header -->


    <!-- start footer section -->
    <footer class="footer-section">
        <div class="footer-top section-padding-100">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-4 col-sm-6">
                        <div class="widget">
                            <a class="navbar-brand logo" href="index.html">Neta</a>
                            <p>Globally brand stand-alone processes and enable methods of empowerment. Efficient provide access to world wide methods vis-a-vis revolution.</p>
                            <ul class="contact-info">
                                <li><i class="fa fa-map-marker"></i>Rodney Square,Wilmington USA</li>
                                <li><i class="fa fa-phone"></i>4588 957 8457</li>
                                <li><i class="fa fa-envelope"></i>contact@yourmail.com</li>
                            </ul>
                            <ul class="social-media">
                                <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <div class="widget">
                            <h5>Recent News</h5>
                            <div class="small-post-list">
                                <div class="post-item">
                                    <div class="post-thumb">
                                        <a href="single.html"><img src="assets/images/small-thumb/01.jpg" alt="thumb"></a>
                                    </div>
                                    <div class="post-content">
                                        <a href="single.html">Holisticly fashion multimedia based synergy vis-a-vis granular.</a>
                                        <ul class="post-meta">
                                            <li>26 March, 2020</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="post-item">
                                    <div class="post-thumb">
                                        <a href="single.html"><img src="assets/images/small-thumb/02.jpg" alt="thumb"></a>
                                    </div>
                                    <div class="post-content">
                                        <a href="single.html">Holisticly fashion multimedia based synergy vis-a-vis granular.</a>
                                        <ul class="post-meta">
                                            <li>26 March, 2020</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="post-item">
                                    <div class="post-thumb">
                                        <a href="single.html"><img src="assets/images/small-thumb/03.jpg" alt="thumb"></a>
                                    </div>
                                    <div class="post-content">
                                        <a href="single.html">Holisticly fashion multimedia based synergy vis-a-vis granular.</a>
                                        <ul class="post-meta">
                                            <li>26 March, 2020</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <div class="widget">
                            <h5>Recent Tweets</h5>
                            <div class="tweet-list">
                                <div class="tweet-item">
                                    <div class="tweet-thumb">
                                        <a href="#"><img src="assets/images/tweet/01.png" alt="thumb"></a>
                                    </div>
                                    <div class="tweet-content">
                                        <a class="name" href="#">Stella Gabriella <span>@stellagabriella</span></a>
                                        <p>Holisticly fabricate state of the art growth. <a href="#">#webenabled</a> band: <a href="#">stella.org/your-voice.</a></p>
                                    </div>
                                </div>
                                <div class="tweet-item">
                                    <div class="tweet-thumb">
                                        <a href="#"><img src="assets/images/tweet/01.png" alt="thumb"></a>
                                    </div>
                                    <div class="tweet-content">
                                        <a class="name" href="#">Stella Gabriella <span>@stellagabriella</span></a>
                                        <p>Holisticly fabricate state of the art growth. <a href="#">#webenabled</a> band: <a href="#">stella.org/your-voice.</a></p>
                                    </div>
                                </div>
                                <div class="tweet-item">
                                    <div class="tweet-thumb">
                                        <a href="#"><img src="assets/images/tweet/01.png" alt="thumb"></a>
                                    </div>
                                    <div class="tweet-content">
                                        <a class="name" href="#">Stella Gabriella <span>@stellagabriella</span></a>
                                        <p>Holisticly fabricate state of the art growth. <a href="#">#webenabled</a> band: <a href="#">stella.org/your-voice.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2020 <a href="index.html">Neta</a>Designed By <a href="https://themeforest.net/user/Labartisan/portfolio" target="_blank">Labartisan</a></p>
        </div>
    </footer>
    <!-- end footer section -->
    <script src='assets/js/plugins.js'></script>
    <script src='assets/js/function.js'></script>
</body>
</html>

 

CSS Structure

We are using several CSS files in this Template. LabArtisan Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

CSS Fiile Included

  • Animate css used
  • Bootstrap css used
  • Lightcase used
  • Favicon used
  • Icofont used
  • Swiper Slider used
  • Style CSS used
  • and some other necessary css files 
style.css situated on assets/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
 
 
	
 

	/*!
	Template Name: neta
	Template URI: https://themeforest.net/user/labartisan
	Author: labartisan.net
	Author URI: https://themeforest.net/user/labartisan
	Description: neta Political & Election Campaign HTML Template
	Version: 1.0.0
	Text Domain: neta
	Tags: agency, campaign, candidate, debate, democracy, democrat, donation, election, election campaign, government, organization,
	political agency, political campaign, political candidate, republican

	*/
	/*--------------------------------------------------------------
	>>> TABLE OF CONTENTS:
	----------------------------------------------------------------
	# Normalize
	# Typography
	# Global CSS
	# Header CSS
	# Page Header
	# Banner
		*Style-1
		*Style-2
		*Style-3
		*Style-4
		*Style51
		*Style-6
		*Style-7
	# about-sectio
	# about-sectio
	# about-section
	# about-bio
	# about-qoute
	# about-media
	# election-campaign-section
	# quick-donation-section
	# become-member-section
	# newsletter-section
	# footer-section
	# donate-details-area
	# donate-amount
	# payment-info
	# election-campaign
	# map-area
	# blog-content
	# entry-single
	# comments-list
	# ccr-section
	# comment-response
	# mission-section
	# campaign-schedule-lsit-area
	# polician-qoute-section
	# gallery-section
	# achievement-section
	# neta-info-section
	# biography-section
	# ourstatement
	# testimonial
	# join-us-section
	# urgent-causes-section
	# progress
	# achieve-goal
	# recent-causes-section
	# member
	# product-preview-section
	# Global Css
	# Button Css
	# Sidebar Css
	# Cart Page Css
	# Fore Zero Page


>>> TABLE OF CONTENTS END:
@@@@@@@@@@@@@@@@@@@@@@ */

	html {
	  font-family: "Roboto", sans-serif;
	  -webkit-text-size-adjust: 100%;
	  -ms-text-size-adjust: 100%;
	}

	body {
	  font-family: "Roboto", sans-serif;
	  font-size: 15px;
	  /*  base font size  15px= 1em*/
	  margin: 0;
	  color: #717171;
	}

	h1 {
	  font-size: 55px;
	}

	h2 {
	  font-size: 36px;
	}

	h3 {
	  font-size: 32px;
	}

	h4 {
	  font-size: 32px;
	}

	h5 {
	  font-size: 24px;
	}

	h6 {
	  font-size: 22px;
	}

	@media (min-width: 992px) {
	  h1 {
	    font-size: 55px;
	  }

	  h2 {
	    font-size: 46px;
	  }

	  h3 {
	    font-size: 36px;
	  }

	  h4 {
	    font-size: 32px;
	  }

	  h5 {
	    font-size: 24px;
	  }

	  h6 {
	    font-size: 22px;
	  }
	}
	h1, h2, h3, h4, h5, h6 {
	  color: #332929;
	  font-weight: 300;
	  font-family: "Roboto", sans-serif;
	}

	h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
	  color: #332929;
	  font-weight: 300;
	}

	p {
	  font-size: 15px;
	  margin: 0 0 1.75em;
	  color: #717171;
	  line-height: 1.6;
	}
	p:last-child {
	  margin-bottom: 0;
	}

	a {
	  color: #717171;
	}

	a, a:hover, a:focus, a:active {
	  text-decoration: none;
	}

	a:hover, a:focus, a:active {
	  color: #e72f4b;
	}

	img {
	  max-width: 100%;
	}

	/**
	 * 4.0 - Forms
	 */
	input {
	  line-height: normal;
	}

	/*button,
	button[disabled]:hover,
	button[disabled]:focus,*/
	input[type=button],
	input[type=button][disabled]:hover,
	input[type=button][disabled]:focus,
	input[type=reset],
	input[type=reset][disabled]:hover,
	input[type=reset][disabled]:focus,
	input[type=submit],
	input[type=submit][disabled]:hover,
	input[type=submit][disabled]:focus {
	  font-size: 1em;
	  display: inline-block;
	  padding: 10px 30px;
	  text-transform: uppercase;
	  font-weight: 700;
	  border: none;
	}

	/* 
	button:hover,
	button:focus,*/
	input[type=button]:hover,
	input[type=button]:focus,
	input[type=reset]:hover,
	input[type=reset]:focus,
	input[type=submit]:hover,
	input[type=submit]:focus {
	  background: #00b2b7;
	}

	/*button:focus,*/
	input[type=button]:focus,
	input[type=reset]:focus,
	input[type=submit]:focus {
	  outline: thin dotted;
	  outline-offset: -4px;
	}

	input[type=text],
	input[type=email],
	input[type=url],
	input[type=password],
	input[type=search],
	input[type=tel],
	input[type=number],
	textarea {
	  background: #f7f7f7;
	  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
	  border: 1px solid #d1d1d1;
	  border-radius: 2px;
	  color: #686868;
	  padding: 0.625em 0.4375em;
	  width: 100%;
	}

	input[type=text]:focus,
	input[type=email]:focus,
	input[type=url]:focus,
	input[type=password]:focus,
	input[type=search]:focus,
	input[type=tel]:focus,
	input[type=number]:focus,
	textarea:focus {
	  border-color: #007acc;
	  color: #1a1a1a;
	  outline: 0;
	}

	::-webkit-input-placeholder {
	  color: #b0b0b0;
	}

	::-moz-placeholder {
	  color: #b0b0b0;
	}

	:-ms-input-placeholder {
	  color: #b0b0b0;
	}

	:-moz-placeholder {
	  color: #b0b0b0;
	}

	.post-password-form {
	  margin-bottom: 1.75em;
	}

	.post-password-form label {
	  color: #686868;
	  display: block;
	  font-family: "Dosis", sans-serif;
	  font-size: 13px;
	  font-size: 0.8125rem;
	  letter-spacing: 0.076923077em;
	  line-height: 1.6153846154;
	  margin-bottom: 1.75em;
	  text-transform: uppercase;
	}

	.post-password-form input[type=password] {
	  margin-top: 0.4375em;
	}

	.post-password-form > :last-child {
	  margin-bottom: 0;
	}

	/**
	 * 5.0 - Alignments
	 */
	.alignleft {
	  float: left;
	}

	.alignright {
	  float: right;
	}

	.aligncenter {
	  clear: both;
	  display: block;
	  margin: 0 auto 1.75em;
	}

	blockquote.alignleft {
	  margin: 0.3157894737em 1.4736842105em 1.473684211em 0;
	}

	blockquote.alignright {
	  margin: 0.3157894737em 0 1.473684211em 1.4736842105em;
	}

	blockquote.aligncenter {
	  margin-bottom: 1.473684211em;
	}

	/**
	 * 6.0 - Clearings
	 */
	.clear:before,
	.clear:after,
	blockquote:before,
	blockquote:after,
	.entry-content:before,
	.entry-content:after,
	.entry-summary:before,
	.entry-summary:after,
	.comment-content:before,
	.comment-content:after,
	.site-content:before,
	.site-content:after,
	.site-main > article:before,
	.site-main > article:after,
	.primary-menu:before,
	.primary-menu:after,
	.social-links-menu:before,
	.social-links-menu:after,
	.textwidget:before,
	.textwidget:after,
	.content-bottom-widgets:before,
	.content-bottom-widgets:after {
	  content: "";
	  display: table;
	}

	.clear:after,
	blockquote:after,
	.entry-content:after,
	.entry-summary:after,
	.comment-content:after,
	.site-content:after,
	.site-main > article:after,
	.primary-menu:after,
	.social-links-menu:after,
	.textwidget:after,
	.content-bottom-widgets:after {
	  clear: both;
	}

	.navbar {
	  margin-bottom: 0;
	}
	.navbar.full-width-nav {
	  padding-left: 30px;
	  padding-right: 30px;
	  text-align: center;
	}
	.navbar.full-width-nav .nav {
	  float: none;
	  display: inline-block;
	}
	.navbar .nav {
	  margin: 6px 0;
	}
	.navbar .nav li {
	  position: relative;
	}
	.navbar .nav li a {
	  padding: 35px 15px;
	  display: inline-block;
	}
	.navbar .nav li a:hover {
	  background-color: transparent;
	}
	.navbar .nav li a:active {
	  background-color: transparent;
	}
	.navbar .nav li a:focus {
	  background-color: transparent;
	}
	.navbar .nav li.active > a, .navbar .nav li:hover > a {
	  color: #e72f4b !important;
	}
	@media (max-width: 991px) {
	  .navbar .nav li.active > a, .navbar .nav li:hover > a {
	    background-color: #e72f4b;
	    color: #fff !important;
	  }
	}
	@media (min-width: 992px) {
	  .navbar .nav li .submenu {
	    position: absolute;
	    left: 0;
	    min-width: 200px;
	    top: 100%;
	    list-style: none;
	    padding-left: 0;
	    background-color: #fff;
	    -webkit-border-radius: 3px;
	    -moz-border-radius: 3px;
	    border-radius: 3px;
	    border-top: 5px solid #e72f4b;
	    transform: scaleY(0);
	    transform-origin: 0 0 0;
	    -webkit-transition: 0.3s;
	    -moz-transition: 0.3s;
	    transition: 0.3s;
	    z-index: 2;
	  }
	  .navbar .nav li .submenu:before {
	    content: "";
	    position: absolute;
	    border-style: solid;
	    border-width: 0 10px 10px;
	    border-color: #e72f4b transparent;
	    display: block;
	    width: 0;
	    z-index: 1;
	    top: -14px;
	    left: 15%;
	  }
	  .navbar .nav li .submenu li a {
	    padding: 12px 30px;
	    display: block;
	    -webkit-transition: 0.3s;
	    -moz-transition: 0.3s;
	    transition: 0.3s;
	    border-bottom: 1px solid #f3f3f3;
	  }
	  .navbar .nav li .submenu li:hover > a {
	    background-color: #717171;
	    color: #fff !important;
	  }
	  .navbar .nav li .submenu li .submenu {
	    left: 100%;
	    top: 0;
	  }
	  .navbar .nav li .submenu li .submenu:before {
	    display: none;
	  }
	  .navbar .nav li .submenu li.active-submenu > a, .navbar .nav li .submenu li:hover > a {
	    background-color: #e72f4b;
	    color: #fff !important;
	  }
	  .navbar .nav li .submenu li:last-child a {
	    border-bottom: none;
	  }
	  .navbar .nav li:hover > .submenu {
	    transform: scaleY(1);
	  }
	}
	@media (max-width: 991px) {
	  .navbar .nav li > a {
	    padding: 13px 20px;
	    margin-bottom: 2px;
	    color: #fff;
	    width: 100%;
	  }
	  .navbar .nav li .submenu {
	    padding-left: 30px;
	    list-style: none;
	    width: 100%;
	    display: none;
	  }
	  .navbar .nav li .submenu li a {
	    padding: 10px 15px;
	    display: block;
	    color: #fff !important;
	    background-color: transparent;
	  }
	}

	.navbar-toggler {
	  color: #e72f4b;
	  outline: none !important;
	  border: 1px solid #e72f4b;
	}

	.header.style-1 .logo, .header.style-1 .navbar .nav li a {
	  color: #fff;
	}

	.header.style-1 .navbar .nav li .submenu li a {
	  color: #0f0d0d;
	}

	.header.style-1 .navbar-toggler {
	  color: #fff;
	  border-color: #fff;
	}

	.transparent-menu .navbar-toggle .icon-bar {
	  background-color: #fff;
	}

	.fixed-top-menu .navbar-toggle .icon-bar {
	  background-color: #fff;
	}

	@media (max-width: 991px) {
	  .navbar-toggle {
	    display: block;
	    margin-top: 36px;
	    margin-right: 0;
	    position: relative;
	    width: 35px;
	  }
	  .navbar-toggle .icon-bar {
	    position: absolute;
	    left: 0;
	    width: 100%;
	    height: 3px;
	    background-color: #332929;
	    margin: 0;
	    -webkit-transition: 0.3s;
	    -moz-transition: 0.3s;
	    transition: 0.3s;
	  }
	  .navbar-toggle .icon-bar:first-child {
	    top: 7px;
	    transform: rotate(-45deg);
	  }
	  .navbar-toggle .icon-bar:nth-child(2) {
	    opacity: 0;
	    margin: 0;
	  }
	  .navbar-toggle .icon-bar:last-child {
	    transform: rotate(45deg);
	    top: 7px;
	    margin: 0;
	  }
	  .navbar-toggle.collapsed .icon-bar {
	    transform-origin: center;
	  }
	  .navbar-toggle.collapsed .icon-bar:first-child {
	    top: 0;
	    transform: rotate(0deg);
	  }
	  .navbar-toggle.collapsed .icon-bar:nth-child(2) {
	    top: 7px;
	    opacity: 1;
	    margin: 0;
	  }
	  .navbar-toggle.collapsed .icon-bar:last-child {
	    transform: rotate(0deg);
	    top: 14px;
	    margin: 0;
	  }
	}

	@media (max-width: 991px) {
	  .navbar-header {
	    float: none;
	    margin: 0 !important;
	    padding: 0 30px;
	  }
	}

	@media (max-width: 991px) {
	  .navbar-nav {
	    margin-left: -15px;
	    margin-right: -15px;
	    background-color: #161743;
	    float: none !important;
	    width: 100%;
	    padding-bottom: 100px;
	  }
	  .navbar-nav li {
	    float: none;
	  }
	}

	@media (max-width: 991px) {
	  .navbar .container {
	    width: 100%;
	    padding: 0;
	  }
	  .navbar .donate {
	    display: none;
	  }
	  .navbar .collapse {
	    max-height: 100vh;
	  }
	  .navbar .collapse.show {
	    overflow-y: scroll !important;
	  }
	}

	.header .donate {
	  float: right;
	}
	@media (max-width: 1199px) {
	  .header .donate {
	    display: none;
	  }
	}
	.header .donate:active {
	  color: #fff;
	}
	.header .donate:focus {
	  color: #fff;
	}
	.header .donate:focus {
	  color: #fff;
	}

	.header {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	}
	.header .header-top {
	  padding: 6px 25px;
	  background-color: #161743;
	  overflow: hidden;
	}
	@media (max-width: 400px) {
	  .header .header-top {
	    display: none;
	  }
	}
	.header .header-top .site-contact-info {
	  padding: 10px 0;
	  list-style: none;
	  margin-bottom: 0;
	}
	.header .header-top .site-contact-info li {
	  float: left;
	  color: #fff;
	  margin-right: 30px;
	}
	.header .header-top .site-contact-info li i {
	  margin-right: 6px;
	  color: #fff;
	}
	.header .header-top .social-media {
	  margin-bottom: 0;
	  margin-top: 3px;
	}
	.header .navbar {
	  z-index: 99;
	}
	.header .transparent-menu {
	  z-index: 9;
	  background-color: transparent;
	}
	.header .transparent-menu .navbar-brand {
	  color: #fff;
	}
	.header .transparent-menu .navbar-nav li a {
	  color: #fff;
	}
	.header .transparent-menu .navbar-nav li .submenu li a {
	  color: #717171;
	}
	.header .transparent-menu .navbar-nav li.active a {
	  color: #e72f4b;
	}
	.header .transparent-menu .navbar-nav li:hover a {
	  color: #e72f4b;
	}
	.header.fixed-top-menu {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  z-index: 9;
	  background-color: #161743;
	}
	.header.fixed-top-menu .transparent-menu {
	  background-color: #161743;
	}
	.header.fixed-top-menu .navbar {
	  background-color: #161743;
	}
	.header.fixed-top-menu .header-top {
	  display: none;
	}
	.header.fixed-top-menu .navbar-nav > li > a {
	  color: #fff;
	}
	.header.fixed-top-menu .logo {
	  color: #fff;
	}
	.header.fixed-top-menu .donate {
	  background-color: #fff;
	  color: #e72f4b;
	}
	.header .codexcoder-navbar .logo {
	  color: #e72f4b;
	  padding: 22px 0;
	}
	.header.header-style2 {
	  text-align: center;
	}
	.header.header-style2 .logo {
	  position: absolute;
	  left: 30px;
	  top: 50%;
	  margin-top: -25px;
	  padding: 0;
	}
	.header.header-style2 .navbar {
	  padding: 0;
	  border: none;
	}
	.header.header-style2 .sd-box {
	  position: absolute;
	  right: 30px;
	  top: 50%;
	  margin-top: -22px;
	}
	.header.header-style2 .sd-box .donate {
	  margin: 0;
	}
	.header.header-style2 .sd-box .social-media {
	  margin: 4px 0 4px 25px;
	}
	.header.header-style2 .navbar-nav {
	  float: none;
	  display: inline-block;
	  margin: 0;
	}
	.header.header-style2 .navbar-nav li a {
	  padding: 32px 15px;
	}

	.about-section {
	  width: 100%;
	  height: 458px;
	  position: relative;
	}
	@media (max-width: 1199px) {
	  .about-section {
	    height: auto;
	    padding: 100px 0;
	  }
	}
	.about-section .about-section-content {
	  position: absolute;
	  left: 0;
	  top: -245px;
	  width: 100%;
	}
	@media (max-width: 1199px) {
	  .about-section .about-section-content {
	    position: static;
	  }
	  .about-section .about-section-content .col-md-7, .about-section .about-section-content .col-md-5 {
	    width: 100%;
	  }
	  .about-section .about-section-content .media-thumb img {
	    width: 100%;
	  }
	  .about-section .about-section-content .about-media {
	    overflow: hidden;
	    margin-bottom: 60px;
	    text-align: center;
	  }
	  .about-section .about-section-content .about-qoute {
	    min-height: auto;
	  }
	}

	.about-politican {
	  margin-top: 5px;
	}

	.about-bio {
	  overflow: hidden;
	  padding: 40px 20px;
	  background-color: #e72f4b;
	}
	@media (max-width: 640px) {
	  .about-bio {
	    justify-content: center;
	  }
	}
	.about-bio .politician-thumb {
	  width: 160px;
	  height: 160px;
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%;
	  border-radius: 50%;
	  margin-right: 20px;
	  overflow: hidden;
	}
	@media (max-width: 640px) {
	  .about-bio .politician-thumb {
	    margin-right: 0;
	  }
	}
	.about-bio .politician-content {
	  padding: 20px 0 0;
	}
	.about-bio .politician-content .name {
	  margin: 0;
	  color: #fff;
	}
	.about-bio .politician-content .designation {
	  margin-bottom: 15px;
	  color: #fff;
	}

	.about-qoute {
	  padding: 40px 30px 15px 75px;
	  position: relative;
	  background-color: #fff;
	}
	.about-qoute:after {
	  content: "";
	  position: absolute;
	  font-family: "fontawesome";
	  left: 15px;
	  top: 20px;
	  font-size: 50px;
	  color: #f3f3f3;
	  z-index: 1;
	}

	.about-media .col-md-12 .media-thumb .play {
	  width: 62px;
	  height: 62px;
	  line-height: 63px;
	  font-size: 24px;
	  margin-left: -31px;
	  margin-top: -31px;
	  z-index: 1;
	}
	.about-media .col-md-12 .media-thumb:after {
	  position: absolute;
	  content: "";
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(15, 13, 13, 0.3);
	}
	.about-media .col-md-12 .view-more {
	  color: #717171;
	  font-size: 18px;
	  margin-top: 20px;
	  display: block;
	}
	.about-media .col-md-12 .view-more i {
	  margin-right: 5px;
	}
	.about-media .media-thumb {
	  margin: 5px;
	  position: relative;
	}
	.about-media .media-thumb img {
	  width: 100%;
	}
	.about-media .media-thumb .play {
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  width: 40px;
	  height: 40px;
	  margin-left: -20px;
	  margin-top: -20px;
	  background-color: rgba(231, 47, 75, 0.8);
	  text-align: center;
	  color: #fff;
	  line-height: 40px;
	  font-size: 18px;
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%;
	  border-radius: 50%;
	  -webkit-transition: 0.3s;
	  -moz-transition: 0.3s;
	  transition: 0.3s;
	}
	.about-media .media-thumb .play:hover {
	  background-color: #e72f4b;
	}
	
 
 
 
 

Js Structure

We are using several Js files in this Template. LabArtisan Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

Js Fiile Included

  • jquery.js used
  • bootstrap.min.js used
  • counterup.js used
  • easing.js used
  • waypoints.js used
  • swiper.min.js used
  • theiaStickySidebar.js used
  • Isotope.js used
  • CountDown.js used
  • lightcase.js used
  • functions.js used
  • and some other necessary css files 
assets/js/plugins contain the the all necessary custom style which is well organized and following are the js file structure :
functions.js situated on assets/js contain the the all necessary custom style which is well organized and following are the functions.js file structure :
	
 

	



(function($){
    "use strict";
    $(document).ready(function(){
        // Sticky Nav
        jQuery(window).on('scroll', function(){'use strict';
            if ( jQuery(window).scrollTop() > 90 ) {
                jQuery('header').addClass('animated fadeInDown fixed-top-menu');
            } else {
                jQuery('header').removeClass('animated fadeInDown fixed-top-menu');
            }
        });

        // Sticky Bio-Nav
        jQuery(window).on('scroll', function(){'use strict';
            if ( jQuery(window).scrollTop() > 250 ) {
                jQuery('.biography-page').addClass('bio-open');
            } else {
                jQuery('.biography-page').removeClass('bio-open');
            }
        });



        $('.mobile-menu-toggle').on('click', function(){
            $(".control-area").toggleClass("open-mobile-menu");
        });




        $('#countdown').countdown({
            date: '12/31/2020 17:00:00',
            offset: +2,
            day: 'Day',
            days: 'Days'
        });





        var swiper = new Swiper('.client-slider-container', {
            pagination: '.swiper-pagination',
            slidesPerView: 'auto',
            paginationClickable: true,
            spaceBetween: 30
        });



        // statement slider 
        var swiper = new Swiper('.ourstatement-container', {
            paginationClickable: true,
            nextButton: '.swiper-controller-button-left',
            prevButton: '.swiper-controller-button-right',
            spaceBetween: 10,
            slidesPerView: 3,
            breakpoints: {
                768: {
                    slidesPerView: 2
                },
                500: {
                    slidesPerView: 1
                }
            }
        });



        // counter up
        $('.number').counterUp({
            delay: 10,
            time: 2000
        });




        $(document).ready(function() {
            $('.control-area, .documentation-main-area')
            .theiaStickySidebar({
                additionalMarginBottom: 30
            });
        });








        // external js: isotope.pkgd.js


        // init Isotope
        // product list page 
        jQuery(window).on('load', function(){
            var $campaign_schedule = $('.campaign-schedule-list').isotope({
                itemSelector: '.campaign-schedule-list-item',
                layoutMode: 'fitRows',
            });



            // filter functions
            var filterFns = {

            };


            // bind filter button click
            $('#filters').on( 'click', 'button', function() {
                var filterValue = $( this ).attr('data-filter');
                // use filterFn if matches value
                filterValue = filterFns[ filterValue ] || filterValue;
                $campaign_schedule.isotope({ filter: filterValue });
            });


            // change is-checked class on buttons
            $('.button-group').each( function( i, buttonGroup ) {
                var $buttonGroup = $( buttonGroup );
                $buttonGroup.on( 'click', 'button', function() {
                $buttonGroup.find('.is-checked').removeClass('is-checked');
                $( this ).addClass('is-checked');
                });
            });
        });


        jQuery(window).on('load', function(){

            $('.gallery-grid').isotope({
                itemSelector: '.gallery-grid-item',
                percentPosition: true,
                masonry: {
                    columnWidth: '.gallery-grid-item-sizer'
                }
            });

        });


        // Payment Method Select Ammount Js
        $('.donation').each(function (i, liList) {
            var $ammount = $(liList);
            $ammount.on('click', 'label', function () {
                $ammount.find('.select-amount').removeClass('select-amount');
                $(this).addClass('select-amount');
            });
        });     


        // Payment Method Select Ammount Js
        $('.donate-amount').each(function (i, liList) {
            var $ammount = $(liList);
            $ammount.on('click', 'label', function () {
                $ammount.find('.select-amount').removeClass('select-amount');
                $(this).addClass('select-amount');
            });
        });     


        //  testimonial style one
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 90,
            direction: 'vertical',
            loop: true,
            slidesPerView: 1
        });
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            centeredSlides: true,
            slidesPerView: '3',
            touchRatio: 1,
            loop: true,
            slideToClickedSlide: true
        });
        galleryTop.params.control = galleryThumbs;
        galleryThumbs.params.control = galleryTop;


        //  testimonial style two
        var swiper = new Swiper('.testimonial-container', {
            paginationClickable: true,
            nextButton: '.tcleft',
            prevButton: '.tcright',
            spaceBetween: 30
        });


        //jQuery for page scrolling feature - requires jQuery Easing plugin
        $('.skicky-nav-menu').each(function (i, liList) {
            var $liList = $(liList);
            $liList.on('click', 'li a', function (event) {
                var $anchor = $(this);
                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1500, 'easeInOutExpo');
                event.preventDefault();
            });
        });

        jQuery(document).ready(function() {
            jQuery('.bio-sidebar').theiaStickySidebar({
                // Settings
                additionalMarginTop: 30
            });
        });

        $('a[data-rel^=lightcase]').lightcase();

        // preloader
        $(window).load(function() {
            $("#loading").delay(2000).fadeOut(500);
            $("#loading-center").on('click', function() {
                $("#loading").fadeOut(500);
            })
        })


	
 
 

Credits

jQuery
CSS & Fonts